<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>笑脸作业</title>
  <style>
.face {
  width: 200px;
  height: 200px;
  border: 10px solid red;
  border-top-color: #fff;   
  border-left-color: #fff;  
  border-radius: 50%;      
  transform: rotate(45deg); 
  position: relative;    
  background-color: orange; 
}

.eye {
  width: 60px;
  height: 20px;
  background-color: #fff;
  border-radius: 10px;
  position: absolute;
  top: 50px;
}
.left-eye {
  left: 20px;
}
.right-eye {
  right: 20px;
}
.eye::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 0;
}
.left-eye::after {
  left: 10px;
}
.right-eye::after {
  right: 10px;
}

.cheek {
  width: 40px;
  height: 40px;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  bottom: 30px;
}
.left-cheek {
  left: 20px;
}
.right-cheek {
  right: 20px;
}

.mouth {
  width: 120px;
  height: 60px;
  border-bottom: 10px solid #000;
  border-radius: 0 0 60px 60px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
 </style>
</head>
<body>
  <div class="face">
    <div class="eye left-eye"></div>
    <div class="eye right-eye"></div>
    <div class="cheek left-cheek"></div>
    <div class="cheek right-cheek"></div>
    <div class="mouth"></div>
  </div>
</body>
</html>